<template>
    <div class="wzt-box">
        <div class="wzt-top">
            <i @click="wztreturn()" class=" wzticon iconfont icon-jiantou"></i>
            <span>每日任务</span>
        </div>
        <div>
            <img class="wxt-top-img" src="../../assets/img/task-topBg.png" alt="">
        </div>
        <div class="wzt-middle">
            <div>
                <span style="color:#000;font-size: 18px;font-weight: bold;">初级任务</span>
                <span v-if="userType == 1" style="background-color: #C6C6C6;border-radius: 3px;color: #fff;padding: 3px 5px;">未开启</span>
                <span v-else style="background-color: #FF2E67;border-radius: 3px;color: #fff;padding: 3px 5px;">已开启</span>
            </div>
            <div style="color:#FF2E67;font-size: 12px;margin-top: 5px;">累计完成以下任务30天，有效期40天内。</div>
            <img class="wxt-bottom-img" src="../../assets/img/task-icon-reward.svg" alt="">
            <div class="wxt-bottom-img" style="width:78px;margin-right: -78px;text-align: center;font-size: 14px;color:#fff;">
                <div style="margin-top:15px;">每日奖励</div>
                <span>26SQT</span>
            </div>
            <div style="margin-top: 28px;">
                <div style="margin-bottom: 10px;font-weight: bold;">
                    <span class="wxt-icon"></span>
                    <span>每日分享3次应用到微信好友/微信朋友圈</span>
                </div>
                <div style="margin-bottom: 10px;font-weight: bold;">
                    <span class="wxt-icon"></span>
                    <span>每日分享3次商品到微信好友/微信朋友圈</span>
                </div>
                <div style="margin-bottom: 10px;font-weight: bold;">
                    <span class="wxt-icon"></span>
                    <span>每日邀请1个好友</span>
                </div>
                <div style="margin-bottom: 10px;font-weight: bold;">
                    <span class="wxt-icon"></span>
                    <span>每日玩游戏3分钟</span>
                </div>
                <div style="margin-bottom: 10px;font-weight: bold;">
                    <span class="wxt-icon"></span>
                    <span>每日看资讯1分钟</span>
                </div>
            </div>
            <div v-if="userType == 2">
                <van-progress style="margin-top:20px;" :show-pivot="false" :percentage="changdu" stroke-width="13" color="#FF2E67" />
                <div style="margin-top:9px;color:#FF2E67;">已完成 {{currentDay}}/30 天</div>
                <div style="border: 1px dashed #CCCCCC;margin-top: 30px;margin-bottom: 14px;"></div>
                <div style="color: #888888;padding-left: 6px;">到期时间：{{endTime}}</div>
            </div>
            <div v-if="userType == 1 || gameBankState==0" @click="stackopolisCli" style="width: 100%;height: 45px;text-align: center;background-color: #FF2E67;border-radius: 6px;color: #fff;line-height: 45px;font-size: 16px;margin-top: 20px;">
                开启高额奖励任务
            </div>
        </div>
        <div class="wxt-bottomImg" :style="userType == 1 || gameBankState == 0?'top:520px':''">
            <img src="../../assets/img/task-img-promote.svg" alt="">
            <div style="position: absolute;top:20px;width: 100%;text-align: center;font-size: 20px;color: #fff;">任务即将升级</div>
            <div style="position: absolute;top:52px;width: 100%;text-align: center;font-size: 12px;color: #fff;">新版任务蓄势待发 更多福利敬请期待</div>
        </div>
        <!-- <div>
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <div v-for="val in dataList">
                    <div class="wzt-detail" v-if="val.state == 1">
                        <p :class="val.inOrOut == 0?'wzt-active':'wzt-active-slect'">
                            <span v-show="val.inOrOut == 0">-</span>
                            <span v-show="val.inOrOut == 1">+</span>
                            <span>{{val.balance}}</span>
                        </p>
                        <div class="yinhang">{{val.fromType}} <span>{{val.createTime}}</span></div>
                    </div>
                </div>
            </van-list>
        </div> -->
    </div>
</template>

<script>
    import { List,Progress,Toast } from 'vant';
    export default {
        name: "blockdetail",
        data(){
            return{
                loading: false,
                finished: false,
                num:0,
                total:0,
                userId:'',
                dataList:[],
                completeDay:0,
                currentDay:0,
                userType:0,
                endTime:'',
                gameBankState:0,
                tbUserSqt:0,
                changdu:0,
                award_total_sqt:0
            }
        },
        components:{
           [List.name]:List,
           [Progress.name]:Progress,
        },
        methods:{
            wztreturn(){
                this.$router.go(-1);
            },
            //查询SQT标题数据
            findSQTTitleData(){
                this.$http.get(this.utils.config + "/netmall/app/person/api/findSQTTitleData?user_id="+this.userId).then((data) => {
                    if (data.data.success) {
                        // this.surplus_sqt = data.data.result.surplus_sqt;
                        // this.today_award = data.data.result.today_award;
                        this.award_total_sqt = data.data.result.award_total_sqt;
                    }
                })
            },
            //sqt余额
            getPersonCenterData() {
                this.$http.post(this.utils.config + "/netmall/app/person/api/getPersonCenterData?user_id=" + this.userId, { user_id: this.userId }).then((data) => {
                    this.tbUserSqt = data.data.result.tbUserSqt.balance;
                })
            },
            //开启高额奖励任务
            stackopolisCli() {
                if(this.tbUserSqt<588){
                    Toast('SQT余额不足，请先充值');
                    this.$router.push('/integralTopUp');
                }else{
                    this.$http.post(this.utils.config + "/netmall/app/gamecenter/api/createGameBuilding?type=1&user_type=2&user_id=" + this.userId).then((data) => {
                        if (data.data.success) {
                            Toast(data.data.message);
                            this.getGameBuildingData();
                        }
                    })
                }
            },
            //获取盖楼首页数据
            getGameBuildingData() {
                this.$http.post(this.utils.config + "/netmall/app/gamecenter/api/getGameBuildingData?type=1&user_id=" + this.userId, { user_id: this.userId }).then((data) => {
                    if (data.data.success) {
                        this.userType = data.data.result.tbUserGameBuiding.userType;
                        this.completeDay = data.data.result.tbUserGameBuiding.completeDay;
                        this.currentDay = data.data.result.tbUserGameBuiding.currentDay;
                        this.changdu = 0|(this.currentDay/30*100);
                        this.endTime = data.data.result.tbUserGameBuiding.endTime;
                        this.gameBankState = data.data.result.state;
                    }
                })
            },
        },
        mounted() {
            this.userId = localStorage.getItem('user_id');
            this.getGameBuildingData();
            this.getPersonCenterData();
            this.findSQTTitleData();
        }
    }
</script>

<style scoped>
    @import "../../assets/font/iconfont.css";
    .wzt-box{
        background:#F0F0F0;
        min-height: 100%;
        overflow: hidden;
        padding: 0 14px;
    }
    .wxt-icon{
        display: inline-block;
        width: 6px;
        height: 6px;
        background-color: #D8D8D8;
        border-radius: 24px;
        margin-right: 7px;
    }
    .wxt-top-img{
        width: 100%;position: absolute;top:0px;left:0px;
    }
    .wxt-bottom-img{
        float: right;
        margin-top: -63px;
    }
    .wxt-bottomImg{
        position: absolute;
        top:572px;
        width: calc(100% - 28px);
    }
    .wzt-middle{
        position: absolute;
        top:200px;
        width: calc(100% - 28px);
        padding: 18px 15px;
        background-color: #fff;
        border-radius: 12px;
    }
    .wzt-top{
        width: 100%;
        margin: 13px 0 10px 0;
        font-size:16px;
        font-family:PingFangSC-Semibold,PingFang SC;
        font-weight:600;
        color:#fff;
        line-height:22px;
        text-align: center;
        position: relative;
        z-index: 1;
    }
    .wzticon{
        font-size: 18px;
        font-weight: 900;
        display: inline-block;
        position: absolute;
        left: 0;
    }
    .wzt-detail{
        width: 100%;
        height:76px;
        background:rgba(216,216,216,0);
        overflow: hidden;
        border-bottom: 1px solid rgba(0,0,0,0.1);;
    }
    .wzt-active{
        margin:19px auto auto 1px ;
        font-size:16px;
        font-family:Roboto-Regular,Roboto;
        font-weight:400;
        color:rgba(255,46,103,1);
        line-height:19px;
    }
    .yinhang{
        margin-top: 6px;
        height:17px;
        font-size:12px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(136,136,136,1);
        line-height:17px;
    }
    .yinhang span{
        font-size:12px;
        font-family:PingFangSC-Regular,PingFang SC;
        font-weight:400;
        color:rgba(136,136,136,1);
        line-height:17px;
        display: inline-block;
        float: right;
    }
    .wzt-active-slect{
        margin:19px auto auto 1px ;
        font-size:16px;
        font-family:Roboto-Regular,Roboto;
        font-weight:400;
        color:#01C29C;
        line-height:19px;
    }


</style>
